<template>
	<view class="container" >
		<view class="cu-card">
			<view class="reg_box">
				<view class="reg_box_bg"></view>
				<view class="c_item">
					<image src="../../static/images/person/per_kefu.png"></image>
					<view class="item_contain">
						<view class="title">公司客服支持</view>
						<view class="mes">24h在线客服</view>
					</view>
					<view class="btn" @click="switchToUrl('/pages/chat/chat')">客服</view>
				</view>
			</view>
			<view class="reg_box">
				<view class="reg_box_bg"></view>
				<view class="c_item">
					<image src="../../static/images/person/per_tel.png"></image>
					<view class="item_contain">
						<view class="title">服务电话</view>
						<view class="mes">{{ tele }}</view>
					</view>
					<view class="btn" @click="callPhone">拨打</view>
				</view>
			</view>
			<view class="reg_box">
				<view class="reg_box_bg"></view>
				<view class="c_item">
					<image src="../../static/images/person/per_ad.png"></image>
					<view class="item_contain">
						<view class="title">技术及广告服务</view>
						<view class="mes">微信：{{ wxcode }}</view>
					</view>
					<view class="btn" @click="copyWx()">复制</view>
				</view>
			</view>
			<view class="reg_box higher_box">
				<view class="reg_box_bg"></view>
				<view class="c_item">
					<image src="../../static/images/person/per_time.png"></image>
					<view class="item_contain">
						<view class="title">服务时间</view>
						<view class="mes">{{ server_time }}</view>
					</view>
				</view>
				<view class="notice">客服服务全年无休，添加技术微信请备注会员账号V2以上级别以上会员添加可通过</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				phone: "",
				uniqid:"",
				time: this.helper.time,
				tele: '400-189-3558',
				wxcode: '123552113',
				server_time: '周一至周五 09:00—22:00'
			};
		},
		methods: {
			//拨打电话
			callPhone: function(){
				let tele = this.tele
				uni.makePhoneCall({
					phoneNumber: tele, // 电话号码
					success: function () {
						console.log('拨号成功');
					},
					fail: function () {
						console.log('拨号失败');
					}
				});
			},
			copyWx:function(){
				let wxcode = this.wxcode
				console.log('复制内容：',wxcode)
				uni.setClipboardData({
					data: wxcode,
					success: function () {
						uni.showToast({
							title: '已复制到剪切板',
							icon: 'success',
							duration: 2000
						});
					}
				});
			},
			// 链接
			navToUrl:function(url){
				uni.navigateTo({
					url: url,
				});	
			},
			switchToUrl:function(url){
				console.log('url:',url)
				uni.switchTab({
					url: url,
				});	
			},
		}
	}
</script>

<style lang="scss">
	page {
		color: #56595d;
		background-color: #ddeafd;

	}
	.reg_box{
		width: 94vw;
		margin: 3vw;
		height: 26vw;
		padding: 3vw;
		// background: #ffffff;
		border-radius: 6px;
		position: relative;
		
		.reg_box_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #63cbff;
			opacity: 0.2;
			border-radius: 10px;
			z-index: 1;
		}
		
		.c_item{
			position: absolute;
			left: 3vw;
			top: 3vw;
			z-index: 2;
			display: flex;
			image{
				width: 20vw;
				height: 20vw;
			}
			.item_contain{
				width: 46vw;
				height: 20vw;
				padding: 3vw 0 0 3vw;
				
				.title{
					font-size: 16px;
					line-height: 36px;
					color:#fff;
				}
				.mes{
					font-size: 14px;
					line-height: 20px;
					color:#9BBFB2;
				}
			}
			.btn{
				width: 80px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color:#fff;
				background: linear-gradient( 180deg, #4EA4FF 0%, #0041f9 100%);
				border-radius: 15px;
				text-align: center;
				margin: 20px 0;
			}
		}
	}
	.higher_box{
		height: 40vw;
		
		.notice{
			padding: 3vw 6vw;
			color:#fff;
			font-size: 13px;
			position: absolute;
			left: 0;
			top: 24vw;
		}
	}
</style>
